

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>React Chrome Developer Tools - React Blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:title" content="React Chrome Developer Tools - React Blog">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html">
  <meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
  <meta property="og:description" content="With the new year, we thought you&#39;d enjoy some new tools for debugging React code. Today we&#39;re releasing the React Developer Tools, an extension to the Chrome Developer Tools. Download them from the Chrome Web Store.
">
  <meta property="fb:app_id" content="623268441017527">

  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
  <link rel="stylesheet" href="/css/syntax.css">
  <link rel="stylesheet" href="/css/codemirror.css">
  <link rel="stylesheet" href="/css/react.css">

  <script src="//use.typekit.net/vqa1hcx.js"></script>
  <script>try{Typekit.load();}catch(e){}</script>

  <!--[if lte IE 8]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/es5-shim.min.js"></script>
  <script src="/js/es5-sham.min.js"></script>
  <![endif]-->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
  <script src="/js/codemirror.js"></script>
  <script src="/js/javascript.js"></script>
  <script src="/js/xml.js"></script>
  <script src="/js/jsx.js"></script>
  <script src="/js/react.js"></script>
  <script src="/js/react-dom.js"></script>
  <script src="/js/babel.min.js"></script>
  <script src="/js/live_editor.js"></script>
</head>
<body>

  <div class="container">

    <div class="nav-main">
  <div class="wrap">
    <a class="nav-home" href="/">
      <img class="nav-logo" src="/img/logo.svg" width="36" height="36">
      React
    </a>
    <div class="nav-lists">
      <ul class="nav-site nav-site-internal">
        <li><a href="/docs/hello-world.html">Docs</a></li>
        <li><a href="/tutorial/tutorial.html">Tutorial</a></li>
        <li><a href="/community/support.html">Community</a></li>
        <li><a href="/blog/" class="active">Blog</a></li>
        <li class="nav-site-search">
          <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
        </li>
      </ul>
      <ul class="nav-site nav-site-external">
        <li><a href="https://github.com/facebook/react">GitHub</a></li>
        <li><a href="https://github.com/facebook/react/releases">v16.0.0-alpha.3</a></li>
      </ul>
    </div>
  </div>
</div>


    <section class="content wrap blogContent">

  <div class="inner-content">
    

<h1>

  React Chrome Developer Tools

</h1>

<p class="meta">
  January  2, 2014
  by
  
    
      <a href="https://twitter.com/sebmarkbage">Sebastian Markbåge</a>
    
    
  
</p>

<hr>

<div class="post">
  <p>With the new year, we thought you&#39;d enjoy some new tools for debugging React code. Today we&#39;re releasing the <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi">React Developer Tools</a>, an extension to the Chrome Developer Tools. <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi">Download them from the Chrome Web Store</a>.</p>

<figure><iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>

<p>You will get a new tab titled &quot;React&quot; in your Chrome DevTools. This tab shows you a list of the root React Components that are rendered on the page as well as the subcomponents that each root renders.</p>

<p>Selecting a Component in this tab allows you to view and edit its props and state in the panel on the right. In the breadcrumbs at the bottom, you can inspect the selected Component, the Component that created it, the Component that created that one, and so on.</p>

<p>When you inspect a DOM element using the regular Elements tab, you can switch over to the React tab and the corresponding Component will be automatically selected. The Component will also be automatically selected if you have a breakpoint within its render phase. This allows you to step through the render tree and see how one Component affects another one.
<figure><a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi"><img src="/img/blog/react-dev-tools.jpg" alt=""></a></figure></p>

<p>We hope these tools will help your team better understand your component hierarchy and track down bugs. We&#39;re very excited about this initial launch and appreciate any feedback you may have. As always, we also accept <a href="https://github.com/facebook/react-devtools">pull requests on GitHub</a>.</p>

</div>


  <div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>


  </div>
  <div class="nav-docs nav-blog">
  <div class="nav-docs-section">
    <h3>Recent posts</h3>
    <ul>
      
        <li><a href="/blog/2016/11/16/react-v15.4.0.html">React v15.4.0</a></li>
      
        <li><a href="/blog/2016/09/28/our-first-50000-stars.html">Our First 50,000 Stars</a></li>
      
        <li><a href="/blog/2016/08/05/relay-state-of-the-state.html">Relay: State of the State</a></li>
      
        <li><a href="/blog/2016/07/22/create-apps-with-no-configuration.html">Create Apps with No Configuration</a></li>
      
        <li><a href="/blog/2016/07/13/mixins-considered-harmful.html">Mixins Considered Harmful</a></li>
      
        <li><a href="/blog/2016/07/11/introducing-reacts-error-code-system.html">Introducing React's Error Code System</a></li>
      
        <li><a href="/blog/2016/04/08/react-v15.0.1.html">React v15.0.1</a></li>
      
        <li><a href="/blog/2016/04/07/react-v15.html">React v15.0</a></li>
      
        <li><a href="/blog/2016/03/29/react-v0.14.8.html">React v0.14.8</a></li>
      
        <li><a href="/blog/2016/03/16/react-v15-rc2.html">React v15.0 Release Candidate 2</a></li>
      
      <li><a href="/blog/all.html">All posts ...</a></li>
    </ul>
  </div>
</div>

</section>


    <footer class="nav-footer">
  <section class="sitemap">
    <a href="/" class="nav-home">
    </a>
    <div>
      <h5><a href="/docs/">Docs</a></h5>
      <a href="/docs/hello-world.html">Quick Start</a>
      <a href="/docs/thinking-in-react.html">Thinking in React</a>
      <a href="/tutorial/tutorial.html">Tutorial</a>
      <a href="/docs/jsx-in-depth.html">Advanced Guides</a>
    </div>
    <div>
      <h5><a href="/community/support.html">Community</a></h5>
      <a href="http://stackoverflow.com/questions/tagged/reactjs" target="_blank">Stack Overflow</a>
      <a href="https://discuss.reactjs.org/" target="_blank">Discussion Forum</a>
      <a href="https://discord.gg/0ZcbPKXt5bZjGY5n" target="_blank">Reactiflux Chat</a>
      <a href="https://www.facebook.com/react" target="_blank">Facebook</a>
      <a href="https://twitter.com/reactjs" target="_blank">Twitter</a>
    </div>
    <div>
      <h5><a href="/community/support.html">Resources</a></h5>
      <a href="/community/conferences.html">Conferences</a>
      <a href="/community/videos.html">Videos</a>
      <a href="https://github.com/facebook/react/wiki/Examples" target="_blank">Examples</a>
      <a href="https://github.com/facebook/react/wiki/Complementary-Tools" target="_blank">Complementary Tools</a>
    </div>
    <div>
      <h5>More</h5>
      <a href="/blog/">Blog</a>
      <a href="https://github.com/facebook/react" target="_blank">GitHub</a>
      <a href="http://facebook.github.io/react-native/" target="_blank">React Native</a>
      <a href="/acknowledgements.html">Acknowledgements</a>
    </div>
  </section>
  <a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource">
    <img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
  </a>
  <section class="copyright">
    Copyright © 2017 Facebook Inc.
  </section>
</footer>

  </div>

  <div id="fb-root"></div>
  <script src="/js/anchor-links.js"></script>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-41298772-1', 'facebook.github.io');
    ga('send', 'pageview');

    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=623268441017527";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    docsearch({
      apiKey: '36221914cce388c46d0420343e0bb32e',
      indexName: 'react',
      inputSelector: '#algolia-doc-search'
    });
  </script>
</body>
</html>
